<template>
      <div id="more">
            <div class="imgbox">
                  <img src="../assets/img/news.png" alt="">
            </div>

            <div class="content">
                  <div class="title" @click="$router.push('/news')">
                        <i class="el-icon-arrow-left"></i> 
                        <span>{{ title }}</span>
                  </div>

                  <div class="box">
                        <div class="item" v-for="(item,index) in listData" :key="index" @click="newsShow(item.id)">
                              <div class="imgbox">
                                    <img :src="item.topic" alt="">
                              </div>
                              <div class="info">
                                    <div class="titles">
                                          {{ item.title }}
                                    </div>
                                    <div class="abstract">
                                          {{ item.abstract }}
                                    </div>
                              </div>
                        </div>
                  </div>
            </div>
            <!--  fenye  -->
            <div class="page">
                  <el-pagination

                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        layout="prev, pager, next, jumper"
                        :total="total">
                  </el-pagination>
            </div>
      </div>
</template>

<script>
      export default {
            computed: {
                  classify() {
                        return this.$route.params.classid 
                  },
                  title() {
                        if (this.classify == '1') {
                              return "盈友动态"
                        } else {
                              return "行业新闻"
                        }
                  }
            },
            watch: {
                  classify(newVal, oldVal) {
                        this.getData()
                  }
            },
            data() {
                  return {
                        listData: [],
                        pageSize: 8,
                        total: 0,
                        currentPage: 1,
                  }
            },
            mounted () {
                  this.getData();
            },
            methods: {
                  async getData( page ) {
                        //console.log(this.classify, this.$key);
                        
                        let res = await this.$axios.post("/index/index/messagemore", {
                              key: this.$key,
                              classify: this.classify,
                              page: page ? page : 1,
                        })
                        //console.log(res);
                        this.listData = res.data.data.zixun
                        this.total = res.data.data.wei[0] * this.pageSize
                        
                  },
                  newsShow( id ) {
                        this.$router.push(`/newsshow/${id}`)
                  },
                  // 页码变化
                  handleCurrentChange(page) {
                        this.getData(page)  
                  }
            },
      }
</script>

<style lang="scss" scoped>
#more {
      width: 100%;
      margin: 30px auto;
      .imgbox {
            width: 100%;
            img {
                  width: 100%;
                  display: block;
            }
      }
      .content {
            width: 1080px;
            margin: 20px auto;
            .title {
                  width: 100%;
                  font-size: 18px;
                  line-height: 30px;
                  color: #2B40CC;
                  display: flex;
                  align-items: center;
                  cursor: pointer;
            }
            .box {
                  width: 100%;
                  margin: 20px 0;
                  .item {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        margin: 30px 0;
                        cursor: pointer;
                        .imgbox {
                              width: 230px;
                              height: 158px;
                              overflow: hidden;
                              img {
                                    width: 230px;
                                    height: 158px;
                                    display: block;
                              }
                        }
                        .info {
                              margin-left: 60px;
                              height: 158px;
                              flex:1;
                              display: flex;
                              flex-direction: column;
                              display: -webkit-box;
                              -webkit-box-orient: vertical;
                              -webkit-line-clamp: 2;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              .titles {
                                    font-size: 30px;
                              }
                              .abstract {
                                    font-size: 18px;
                                    color: #8D8D8D;
                                    margin-top: 20px;
                                    width: 680px;
                                    
                              }
                        }
                  }
            }
      }
      .page {
            width: 1080px;
            margin: 30px auto;
            text-align: center;
      }
}
</style>